import React, { Component } from 'react';
import PropTypes from 'prop-types';

import style from './operModal.scss';
import MModal from '@/component/common/MModal';
import { Spin } from 'antd';

class OperModal extends Component {
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired,
        width: PropTypes.number.isRequired,
        height: PropTypes.number.isRequired,
        title: PropTypes.string,
        onOk: PropTypes.func,
        onCancel: PropTypes.func,
        okText: PropTypes.string,
        cancelText: PropTypes.string,
        children: PropTypes.node
    };
    static defaultProps = {
        title: 'Oper Modal',
        okText: '确定',
        cancelText: '取消'
    };
    constructor() {
        super();
    }
    defaultState = {
        spinning: false
    };
    okClick = async () => {
        const { onClose, onOk } = this.props;
        this.setState({ spinning: true });
        if (onOk) await onOk();
        this.setState({ spinning: false });
    };
    cancelClick = async () => {
        const { onClose, onCancel } = this.props;
        this.setState({ spinning: true });
        if (onCancel) await onCancel();
        this.setState({ spinning: false });
        onClose();
    };
    state = this.defaultState;
    render() {
        const { visible, onClose, title, width, height, okText, cancelText, children } = this.props;
        const { okClick, cancelClick } = this;
        return (
            <MModal visible={visible} onClose={onClose} showMask closeMaskOnClick={false} width={width} height={height}>
                <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                    <div className={style['oper-modal']} style={{ height: height - 30 }}>
                        <div className={style['modal-title']}>
                            <h1>{title}</h1>
                        </div>
                        <div className={style['modal-content']}>
                            {children}
                        </div>
                        <div className={style['modal-oper']}>
                            <a className={style['cancel-btn']} href="javascript:void(0);" onClick={cancelClick}>{cancelText}</a>
                            <a className={style['confirm-btn']} href="javascript:void(0);" onClick={okClick}>{okText}</a>
                        </div>
                    </div>
                </Spin>
            </MModal>
        );
    }
}

class LabelItem extends Component {
    static propTypes = {
        label: PropTypes.string.isRequired,
        width: PropTypes.number,
        align: PropTypes.string,
        children: PropTypes.node,
        labelStyle: PropTypes.object
    };
    render() {
        const { label, children, width, align, labelStyle } = this.props;
        let _labelStyle = {};
        if (width) _labelStyle.width = width;
        if (align) _labelStyle.textAlign = align;
        _labelStyle = { ..._labelStyle, ...labelStyle };
        return (
            <div className={style['label-item']}>
                <span className={style['label-text']} style={_labelStyle}>{label}：</span>
                {children}
            </div>
        );
    }
}

OperModal.LabelItem = LabelItem;

export default OperModal;